<template>
  <el-dialog
    v-if="dialogVisible"
    v-model="dialogVisible"
    title="编辑用户"
    width="50%"
    @close="handelCancel"
  >
    <el-form
      ref="userFormRef"
      :model="userForm"
      :rules="userFormRules"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" />
      </el-form-item>

      <!-- <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" type="password" show-password />
      </el-form-item> -->

      <el-form-item label="角色" prop="role">
        <el-select
          v-model="userForm.role"
          class="m-2"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-select
          v-model="userForm.gender"
          class="m-2"
          placeholder="选择性别"
          style="width: 100%"
        >
          <el-option
            v-for="item in genderOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="个人简介" prop="introduction">
        <el-input
          v-model="userForm.introduction"
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 6 }"
          :resize="'none'"
          maxlength="300"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="头像" prop="avatar">
        <Upload :avatar="userForm.avatar" @imgChange="handleChange" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handelCancel">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "EditDialog",
};
</script>
<script setup>
import axios from "axios";
import { ref, watch, reactive } from "vue";
import Upload from "@/components/upload/Upload.vue";

const props = defineProps({
  modelValue: Boolean,
  editItemId: String,
});
const emit = defineEmits(["update:modelValue", "updateItem"]);

const dialogVisible = ref(false);

const userFormRef = ref();
let userForm = reactive({
  _id: "",
  username: "username2",
  // password: "123456",
  role: 1, //1 是管理员 ,2编辑
  gender: 0,
  introduction: "username2简介",
  avatar: "",
  file: null,
});
// 规则校验
const userFormRules = reactive({
  username: [{ required: true, message: "请输入名字", trigger: "blur" }],
  // password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  role: [{ required: true, message: "请选择权限", trigger: "blur" }],
  gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
  introduction: [{ required: true, message: "请输入介绍", trigger: "blur" }],
  avatar: [{ required: false, message: "请上传头像", trigger: "blur" }],
});
// 角色选择
const roleOptions = [
  { label: "管理员", value: 1 },
  { label: "编辑", value: 2 },
];
// 性别选择
const genderOptions = [
  { label: "保密", value: 0 },
  { label: "男", value: 1 },
  { label: "女", value: 2 },
];

// 每次选择完图片之后的回调
const handleChange = (file) => {
  userForm.avatar = URL.createObjectURL(file);
  userForm.file = file;
};

// 关闭弹窗
const handelCancel = () => {
  dialogVisible.value = false;
  emit("update:modelValue", false);
};

// 提交编辑
const handelConfirm = () => {
  userFormRef.value.validate(async (valid) => {
    if (valid) {
      const params = new FormData();
      for (let i in userForm) {
        params.append(i, userForm[i]);
      }
      await axios
        .put(`/adminapi/user/list/${props.editItemId}`, params)
        .catch(() => {
          console.error(error);
        });
      handelCancel();
      emit("updateItem", props.editItem);
    }
  });
};

// 获取对应用户的详情信息
const getItemInfo = async () => {
  await axios
    .get(`/adminapi/user/list/${props.editItemId}`)
    .then((res) => {
      if (res?.data?.ActionType !== "OK") return;
      Object.assign(userForm, res.data.data[0]);
      dialogVisible.value = true;
    })
    .catch((error) => {
      console.error(error);
    });
};

watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue) getItemInfo();
  }
);
</script>

<style lang="scss" scoped>
</style>